<template>
  <div>
    <div style="margin-bottom: 32px">
      <vs-avatar color="#000" style="margin-inline-end: 8px" />
      <span style="margin-left: 3px; position: relative; top: -20px">
        <b>你</b>
      </span>
      <div
        class="flex px-2 py-4 sm:px-4"
        style="margin-left: 32px; padding-top: 0; margin-top: -20px"
      >
        <div class="flex max-w-3xl items-center">
          <p>{{ record.msg }}</p>
        </div>
      </div>
    </div>

    <MessageAI :record="record"></MessageAI>
  </div>
</template>

<script setup>
import { reactive, ref } from "vue";
import MessageAI from "./MessageAI.vue";
const props = defineProps({
  record: {
    type: Object,
    required: true,
  },
});

const record = ref(props.record);
</script>
